<div
  class="modal modal-default fade show"
  id="modal-nav-posts-{{$ctrl.srcId}}"
  ng-init="$ctrl.loadPosts()"
>
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <div class="row">
          <div class="col-md-12">
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
            <filter-list
              request="$ctrl.request"
              callback="$ctrl.loadPosts(pageIndex)"
            ></filter-list>
          </div>
        </div>
      </div>
      <!-- <div class="modal-body" style="height: calc(100vh - 143px);overflow-y: auto;"> -->
      <div class="modal-body">
        <div class="tab-pane" ng-if="$ctrl.navs.length>0">
          <navs
            data="$ctrl.navs"
            prefix="'post-nav'"
            key="'postId'"
            details-url="'/portal/post/details/'"
            model="'nav-page-post'"
          ></navs>
        </div>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-md-12">
            <paging
              class="small"
              page="$ctrl.data.page"
              page-size="$ctrl.data.pageSize"
              total="$ctrl.data.totalItems"
              ul-class="pagination justify-content-end m-0"
              a-class="page-link"
              paging-action="$ctrl.loadPosts(page-1)"
              scroll-top="true"
            >
            </paging>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <a
              class="btn btn-primary text-white px-4"
              ng-click="$ctrl.saveSelected()"
              >Save</a
            >
          </div>
        </div>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
